<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit">
    <script src="__CDN__/assets/js/html5shiv.js"></script>
    <script src="__CDN__/assets/js/respond.min.js"></script>
    <link href="__CDN__/assets/css/backend{$Think.config.app_debug?'':'.min'}.css?v={$Think.config.site.version}" rel="stylesheet">
    <title>{$title|default=''}</title>

    <link rel="stylesheet" type="text/css" href="/assets/login/css/normailze.css" />
    <link rel="stylesheet" type="text/css" href="/assets/login/css/base.css" />
    <link rel="stylesheet" type="text/css" href="/assets/login/css/login.css" />
    <link rel="stylesheet" type="text/css" href="/assets/login/css/jigsaw.css" />
    <link rel="shortcut icon" href="__CDN__/assets/img/favicon.ico" />
    <script type="text/javascript">
        var require = {
            config:  {$config|json_encode}
        };
    </script>
</head>

<body>
<div class="register" id="register">
    <p class="register_tab">已有账号，<span id="toLogin">直接登录</span></p>
    <div class="register_main">
        <form action="index/teacherRegister" method="post" id="register-form">
        <div class="register_main_box">
            <span>手机号</span>
            <input class="register-phone" type="number"  name="phone" autocomplete="off" value="" placeholder="请输入手机号" oninput="if(value.length>11)value=value.slice(0,11)">
        </div>
        <div id="container"></div>

        <div class="register_main_box code">
            <div>
                <span>短信验证</span>
                <input type="text"  name="code" autocomplete="off" value="" oninput="if(value.length>6)value=value.slice(0,6)">
            </div>
            <button type="button" id="sendCode">获取验证码</button>
        </div>
        <div class="register_main_box">
            <span>密码</span>
            <input type="password" name="password" autocomplete="off" value="" placeholder="请输入6-20位密码" maxlength="20">
        </div>
        <div class="register_main_box">
            <span>确认密码</span>
            <input type="password" placeholder="请确认密码" maxlength="20">
        </div>
        <div class="register_main_box">
            <span>输入邀请码</span>
            <input type="text" placeholder="请确入邀请码" name="invite_code" autocomplete="off" value="" oninput="if(value.length>6)value=value.slice(0,6)" maxlength="20">
        </div>
<!--        <button>立即注册</button>-->
        <button type="submit" style="background: #0097DA" class="btn btn-success btn-lg btn-block">{:__('立即注册')}</button>
        </form>>
    </div>
</div>
<div id="login" class="register isShow">
    <div class="login login_isShow">
        <p class="register_tab">尚无账号，<span id="toRegister">立即注册</span></p>
        <div class="register_main">
            <ul class="login_tab">
                <li data-id="code" class="isTab">手机号登录</li>
                <li data-id="account">账号登录</li>
            </ul>
            <div class="code-login">
            <form action="index/phoneLogin" method="post" id="code-form">
            <div class="register_main_box">
                <span>手机号</span>
                <input class="code-phone"  type="number" name="phone" autocomplete="off" value="" placeholder="请输入手机号" oninput="if(value.length>11)value=value.slice(0,11)">
            </div>
            <div id="container2"></div>
            <div class="register_main_box code">
                <div>
                    <span>短信验证</span>
                    <input type="text" name="code" autocomplete="off" value=""  oninput="if(value.length>6)value=value.slice(0,6)">
                </div>
                <button id="sendLoginCode" type="button">获取验证码</button>
            </div>
                <div class="form-group">
                    <button type="submit" style="background: #0097DA" class="btn btn-success btn-lg btn-block">{:__('Sign in')}</button>
                </div>
            </form>
            </div>
            <div class="account-login" style="display: none">
                <form action="" method="post" id="login-form">
                <div id="errtips" class="hide"></div>
                    {:token()}
                <div class="register_main_box">
                    <span>{:__('Username')}</span>
                    <input id="pd-form-username" type="text" placeholder="请输入账号"  name="username" autocomplete="off" value="" data-rule="{:__('Username')}:required;username" oninput="if(value.length>11)value=value.slice(0,11)">
                </div>
                <div class="register_main_box">
                    <span>{:__('Password')}</span>
                    <input id="pd-form-password"  type="password" name="password" autocomplete="off" value="" data-rule="{:__('Password')}:required;password" placeholder="请输入密码" oninput="if(value.length>11)value=value.slice(0,11)">
                </div>
                <div class="form-group">
                    <button type="submit" style="background: #0097DA" class="btn btn-success btn-lg btn-block">{:__('Sign in')}</button>
                </div>
                </form>
            </div>
        </div>
        </div>
    </div>
</div>
{include file="common/script" /}

</body>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<script src="/assets/login/js/jigsaw.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    jigsaw.init({
        el: document.getElementById('container'),
        width: 415, // 可选, 默认310
        height: 105, // 可选, 默认155
        onSuccess: function() {
            console.log('成功');
            $(".register_main_box button").addClass('blue');
        },
        onFail: function() {
            console.log('失败');
        },
        onRefresh: function() {
            $(".register_main_box button").removeClass('blue');
        }
    })
    jigsaw.init({
        el: document.getElementById('container2'),
        width: 415, // 可选, 默认310
        height: 105, // 可选, 默认155
        onSuccess: function() {
            console.log('成功');
        },
        onFail: function() {
            console.log('失败');
        },
        onRefresh: function() {
        }
    })
</script>
<script type="text/javascript">
    // 跳转登录
    $(document).on("click","#toLogin",function (){
        $('#login').addClass('isShow');
        $('#register').removeClass('isShow');
    });
    // 跳转注册
    $(document).on("click","#toRegister",function (){
        $('#register').addClass('isShow');
        $('#login').removeClass('isShow');
    });

    $(document).on("click",".login_tab li",function (){
        $(this).addClass("isTab");
        $(this).siblings('li').removeClass('isTab');
        let type = $(this).data('id');
        if(type === 'code'){
            $(".code-login").show();
            $(".account-login").hide();
        }else{
            $(".code-login").hide();
            $(".account-login").show();
        }
    });
</script>
</html>
